/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-09-04 16:42:58
 * @LastEditors: machinist_wq
 * @LastEditTime: 2023-02-28 12:49:51
 * @Description: 单选框
 * 既往不恋！当下不杂！未来不迎！！！
 */

"use strict";
import { FC, ReactElement } from "react";
import { Space } from "antd";

import styles from "./index.less";

interface IData {
  disabled?: boolean;
  key: string;
  value: string;
  width?: number | string;
}
interface IPorps {
  dataSource: IData[];
  value: number | string;
  onChange: (key: string) => void;
}
{
  /* <CardRadio
  dataSource={[
    { key: "ppt", value: "文档+视频（三分屏）", width: 168 },
    { key: "video", value: "纯视频", width: 168 },
  ]}
/>; */
}
const Index: FC<IPorps> = (props: IPorps): ReactElement => {
  const { dataSource, value, onChange } = props;

  const handleClick = (key: string) => onChange(key);

  return (
    <div className={styles.cardRadio}>
      <Space size="middle">
        {dataSource.map((item: IData) => {
          return (
            <div
              onClick={() =>
                !item.disabled && value !== item.key && handleClick(item.key)
              }
              style={{ width: item.width ?? "auto" }}
              className={`${styles.card}
            ${value === item.key ? styles.selsected : null} `}
              key={item.key}>
              {item.value}
            </div>
          );
        })}
      </Space>
    </div>
  );
};
export default Index;
